// src/components/BlogList.tsx
'use client';

import React from 'react';
import Link from 'next/link';
import { BlogPostProps } from '@/lib/getBlogPosts';
import ErrorBoundary from '@/components/ErrorBoundary';

const BlogList: React.FC<{ posts: BlogPostProps[] }> = ({ posts }) => {
  return (
    <ErrorBoundary fallback={<div>Error loading blog posts</div>}>
      <div className="bg-gradient-to-b from-gray-100 to-white w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
        {posts.length === 0 ? (
          <div className="text-center py-10">No posts found</div>
        ) : (
          posts.map((post, index) => (
            <React.Fragment key={post.slug}>
              <Link href={`/blog/${post.slug}`} >
                {post.title}
              </Link>
            </React.Fragment>
          ))
        )}
      </div>
    </ErrorBoundary>
  );
};

export default BlogList;


